<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page isELIgnored ="false" %>
<%@ taglib prefix="c" uri="jakarta.tags.core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ include file="partials/_start.jsp" %>

<!-- 引入完整的 Cherry Markdown 库 -->
<link rel="stylesheet" href="vendor/cherry-markdown-0.8.49/dist/cherry-markdown.min.css">
<script src="vendor/cherry-markdown-0.8.49/dist/cherry-markdown.min.js"></script>

<style>
    /* 覆盖1: border-left */
    .cherry-previewer {
        border-left: none;
    }

    /* 覆盖2: box-shadow */
    /*.cherry {
        box-shadow: none;
    }*/

    /* 覆盖3: background-color */
    /*.cherry {
        background: none;
    }
    .cherry-previewer {
        background-color: unset;
    }
    .cherry-markdown.theme__light {
        background-color: unset;
    }
    .cherry.theme__light .cherry-previewer {
        background-color: unset;
    }*/

    /* 覆盖4: a.anchor:before */
    .cherry-markdown a.anchor:before {
        content: "";
    }
</style>

<main class="container mt-5">
    <div class="row">
        <div class="col mx-auto">
            <article>
                <h1 class="mb-4">${blog.title}</h1>
                <div id="blog-content" class="blog-content"  data-content="${fn:escapeXml(blog.content)}">
                    <!-- 这里将由 JavaScript 填充解析后的 HTML 内容 -->
                </div>
            </article>
            <div class="my-5">
                <a href="blog-list" class="btn btn-primary">返回博客列表</a>
            </div>
        </div>
    </div>
</main>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        // 从 data 属性获取内容
        const content = document.getElementById('blog-content').dataset.content;
        const cherry = new Cherry({
            id: 'blog-content',
            value: content,
            editor: {
                defaultModel: 'previewOnly',
            },
            toolbars: {
                // 打开侧边目录
                toc: {
                    updateLocationHash: false, // 不更新URL的hash
                    defaultModel: 'full', // 完整模式，展示所有标题
                },
            }
        });
    });
</script>

<%@ include file="partials/_end.jsp" %>
